<template>
  <div class="drag-container">
    <div>
      <h2>列表 1</h2>
      <draggable class="drag-list" :list="list1" :group="{name:'items', pull:true, put:true}" @end="onEnd">
        <template #item="{ element }">
          <div class="drag-item">{{ element.name }}</div>
        </template>
      </draggable>
    </div>

    <div>
      <h2>列表 2</h2>
      <draggable class="drag-list" :list="list2" :group="{name:'items', pull:true, put:true}" @end="onEnd">
        <template #item="{ element }">
          <div class="drag-item">{{ element.name }}--------------{{ element.id }}</div>
        </template>
      </draggable>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  setup() {
    const list1 = ref([
      { name: '项目 1-1', id: '1-1' },
      { name: '项目 1-2', id: '1-2' },
      { name: '项目 1-3', id: '1-3' },
    ]);

    const list2 = ref([
      { name: '项目 2-1', id: '2-1' },
      { name: '项目 2-2', id: '2-2' },
      { name: '项目 2-3', id: '2-3' },
    ]);

    const onEnd = () => {
      console.log('拖动结束', list1.value, list2.value);
    };

    return {
      list1,
      list2,
      onEnd,
    };
  },
};
</script>

<style scoped>
.drag-container {
  width: 600px;
  display: flex;
  justify-content: space-around;
}

.drag-list {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}

.drag-item {
  padding: 10px;
  margin: 5px 0;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: move;
}
</style>